<!-- -----------------------------------------------物资领用表------------------------------------ -------- -->
<template>
  <div>
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <el-form-item label="领用人" prop="name">
        <el-input v-model="listQuery.rcName" span="8" placeholder="请输入货物名称"></el-input>
      </el-form-item>
      <el-form-item label="领用日期" prop="date">
        <el-input v-model="listQuery.rcTime" span="8" placeholder="请输入领用日期"></el-input>
      </el-form-item>
      <el-form-item label="审批状态" prop="state">
        <el-select v-model="listQuery.isState" placeholder="全部">
          <el-option label="待审批" value="1"></el-option>
          <el-option label="待提交" value="2"></el-option>
          <el-option label="已通过" value="3"></el-option>
          <el-option label="已拒绝" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审批人" prop="uname">
        <el-input v-model="listQuery.approver" span="8" placeholder="请输入申请人"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitSelect" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="CZSelect" icon="el-icon-search">重置</el-button>
      </el-form-item>
    </el-form>
    
    <el-table :data="tableData" border stripe style="width: 100%; margin-bottom: 20px">
      <el-table-column prop="goodsTitle" label="领用标题"></el-table-column>
      <el-table-column prop="useInfo" label="用途描述"></el-table-column>
      <el-table-column prop="rcName" label="领用人"></el-table-column>
      <el-table-column prop="rcTime" label="领用日期"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" ></el-table-column>
      <el-table-column prop="isState" label="状态" :formatter="statusText"></el-table-column>
      <el-table-column prop="approver" label="审批人"></el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteGoods(scope)">删除</el-button>
          <el-button size="mini" type="primary" @click="CKGoods(scope)">查看</el-button>
          :if(scope.IsState==4){
            <el-button size="mini" type="primary" @click="EditGoods(scope)">编辑</el-button>
            <el-button size="mini" type="primary" @click="TrueGoods(scope)">重新提交</el-button>
          }else if(scope.IsState==2){
            <el-button size="mini" type="primary" @click="EditGoods(scope)">编辑</el-button>
            <el-button size="mini" type="primary" @click="FalseGoods(scope)">提交审批</el-button>
          }
          
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="PaIndex"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="PaSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      PaIndex: 1,
      PaSize: 5,
      total: 0,
      listQuery:{
        approver:"",
        isState:"",
        rcTime:"",
        rcName:"",
      },
    };
  },
  created: function () {
    this.axios
      .get("https://localhost:44331/api/app/goods_Receiving", {
        params: { PageIndex: this.PaIndex, PageSize: this.PaSize },
      })
      .then((res) => {
        (this.tableData = res.data.items),
          (this.total = res.data.totalCount);
      });
  },
  methods: {
    statusText: function (row, column, cellValue, index) {
      if (row.isState == 1) {
        return "待审批";
      } else if(row.isState == 2) {
        return "待提交";
      }else if(row.isState == 3) {
        return "已通过";
      }else if(row.isState == 4) {
        return "已拒绝";
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.axios
        .get("https://localhost:44331/api/app/goods_Receiving", {
          params: { PageIndex: this.paIndex, PageSize: val },
        })
        .then(
          (res) => {
            (this.tableData = res.data.items),
          (this.total = res.data.totalCount);
          }
        );
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.axios
        .get("https://localhost:44331/api/app/goods_Receiving", {
          params: { PageIndex: val, PageSize: this.PaSize },
        })
        .then(
          (res) => {
            (this.tableData = res.data.items),
          (this.total = res.data.totalCount);
          }
        );
    },
    deleteProduct(scope) {
      this.$confirm("是否将此操作放入回收站?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.axios
          .post(
            "https://localhost:44375/api/Product/PostDel?id=" + scope.row.ProID
          )
          .then((res) => {
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "回收成功",
                $router: push("/Product"),
              });
            } else {
              this.$message.error("回收失败，请先删除该类别的所有子类");
            }
          });
      });
    },
    onSubmitSelect(listQuery) {
      this.axios
        .get("https://localhost:44331/api/app/goods_Receiving?name=" +
            this.listQuery.rcName +
            "&date=" +
            this.listQuery.rcTime +
            "&uname=" +
            this.listQuery.approver + 
            "&state=" +
            this.listQuery.isState
        )
        .then((res) => {
          this.tableData = res.data.items;
          this.total = res.data.totalCount;
        });
    },
  },
};
</script>

<style scoped>
.table-grid-content {
  border-radius: 4px;
  height: 50px;
  background: #ebeef5;
  padding: 10px;
}
</style>